<template>
	<view>
		<view class="container p-bottom" v-if="goodsList.length && formData.length ">
			<view class="goods-list">
				<view class="goods-item" v-for="(item,indexss) in goodsList " :key="indexss">

					<!-- 商品详情 -->
					<view class="goods-detail dis-flex flex-dir-row">
						<view class="left">
							<image class="goods-image" :src="item.image.file_path "></image>
						</view>
						<view class="right dis-flex flex-box flex-dir-column flex-x-around">
							<text class="twolist-hidden">{{ item.goods_name }}</text>
							<text class="">￥{{ item.goods_price }}</text>
						</view>
					</view>

					<!-- 选择评价 -->
					<view class="score-row dis-flex flex-x-around">
						<view @tap="setScore" class="score-item score__praise dis-flex flex-y-center flex-x-center" :class="formData[indexss].score==10?'__active':''" :data-index="indexss" data-score="10">
							<view class="score">
								<text class="score__icon iconfont icon-haoping"></text>
								<text class="score__text">好评</text>
							</view>
						</view>
						<view @tap="setScore" class="score-item score__review dis-flex flex-y-center flex-x-center"  :class="formData[indexss].score==20?'__active':''" :data-index="indexss" data-score="20">
							<view class="score">
								<text class="score__icon iconfont icon-zhongping"></text>
								<text class="score__text">中评</text>
							</view>
						</view>
						<view @tap="setScore" class="score-item score__negative dis-flex flex-y-center flex-x-center" :class="formData[indexss].score==30?'__active':''" :data-index="indexss" data-score="30">
							<view class="score">
								<text class="score__icon iconfont icon-chaping"></text>
								<text class="score__text">差评</text>
							</view>
						</view>
					</view>

					<!-- 评价内容 -->
					<view class="dis-flex content-row">
						<textarea @input="contentInput" :data-index="indexss" maxlength="2000" placeholder="请输入评价内容 (留空则不评价)"
						 placeholderStyle="color:#ccc"></textarea>
					</view>

					<!-- 图片列表 -->
					<view class="image-list">
						<view class="image-preview" v-for="(item,index) in formData[indexss].image_list" :v-for-index="imageIndex" :v-for-item="imagePath"
						 :key="index">
							<text class="image-delete iconfont icon-shanchu" @tap="deleteImage" :data-index="index" :data-image-index="imageIndex"></text>
							<image mode="aspectFill" :src="item "></image>
						</view>
						<view @tap="chooseImage" class="image-picker dis-flex flex-dir-column flex-x-center flex-y-center" :data-index="indexss"
						 v-if=" !formData[indexss].image_list || formData[indexss].image_list.length < 6 ">
							<text class="choose__icon iconfont icon-tubiao_xiangji"></text>
							<text class="choose__text">上传图片</text>
						</view>
					</view>
				</view>
			</view>

			<view class="flow-fixed-footer b-f">
				<view class="flow-btn f-32">
					<view @tap="submit">确认提交</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 页面参数
				options: null,

				// 待评价商品列表
				goodsList: [],

				// 表单数据
				formData: [],
			}
		},

		submitDisable: false,

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			// 记录页面参数
			this.options = options;

			// 获取待评价商品列表
			this.getGoodsList();
		},
		methods: {

			/**
			 * 获取待评价商品列表
			 */
			getGoodsList: function() {
				let _this = this;
				_this._get('user.comment/order', {
					order_id: this.options.order_id
				}, function(result) {
					let goodsList = result.data.goodsList;
					_this.setData({
						goodsList,
						formData: _this.initFormData(goodsList)
					});
					
				});
			},

			/**
			 * 初始化form数据
			 */
			initFormData: function(goodsList) {
				let data = [];
				goodsList.forEach(function(item) {
					data.push({
						goods_id: item.goods_id,
						order_goods_id: item.order_goods_id,
						score: 10,
						content: '',
						image_list: [],
						uploaded: []
					});
				});
				return data;
			},

			/**
			 * 设置评分
			 */
			setScore: function(e) {
				let dataset = e.currentTarget.dataset;
				
				this.$set(this.formData[dataset.index], 'score', dataset.score)
			},

			/**
			 * 输入评价内容
			 */
			contentInput: function(e) {
				let index = e.currentTarget.dataset.index;
			
				this.$set(this.formData[index], 'content', e.detail.value)
			
				// this.setData({
				// 	['formData[' + index + '].content']: e.detail.value
				// });
			},

			/**
			 * 选择图片
			 */
			chooseImage: function(e) {
				let _this = this,
					index = e.currentTarget.dataset.index,
					imageList = _this.formData[index].image_list;
				// 选择图片
				uni.chooseImage({
					count: 6 - imageList.length,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {

						_this.$set(_this.formData[index], 'image_list', imageList.concat(res.tempFilePaths))
							console.log(_this.formData);return false;
						// _this.setData({
						// 	['formData[' + index + '].image_list']: imageList.concat(res.tempFilePaths)
						// });
					}
				});
			},

			/**
			 * 删除图片
			 */
			deleteImage: function(e) {
				let dataset = e.currentTarget.dataset,
					image_list = this.formData[dataset.index].image_list;
				image_list.splice(dataset.imageIndex, 1);
				
				this.$set(this.formData[dataset.index], 'image_list', image_list)
				
				// this.setData({
				// 	['formData[' + dataset.index + '].image_list']: image_list
				// });
			},

			/**
			 * 表单提交
			 */
			submit: function() {
				let _this = this,
					formData = _this.formData;

				// 判断是否重复提交
				if (_this.submitDisable === true) {
					return false;
				}
				// 表单提交按钮设为禁用 (防止重复提交)
				_this.submitDisable = true;

				uni.showLoading({
					title: '正在处理...',
					mask: true
				});

				// form提交执行函数
				let fromPostCall = function(formData) {
					console.log('fromPostCall');
					console.log(formData);
					
					_this._post_form('user.comment/order', {
							order_id: _this.options.order_id,
							formData: JSON.stringify(formData)
						}, function(result) {
							if (result.code === 1) {
								_this.showSuccess(result.msg, function() {
									uni.navigateBack();
								});
							} else {
								_this.showError(result.msg);
							}
						},
						false,
						function() {
							uni.hideLoading();
							_this.submitDisable = false;
						});
				};

				// 统计图片数量
				let imagesLength = 0;
				formData.forEach(function(item, formIndex) {
					item.content !== '' && (imagesLength += item.image_list.length);
				});

				// 判断是否需要上传图片
				imagesLength > 0 ? _this.uploadFile(imagesLength, formData, fromPostCall) : fromPostCall(formData);
			},
			

			/**
			 * 上传图片
			 */
			uploadFile: function(imagesLength, formData, callBack) {
				let _this = this;
				// POST 参数
				let params = {
					wxapp_id: _this.siteInfo.wxapp_id,
					token: uni.getStorageSync('token')
				};
				// 文件上传
				let i = 0;
				formData.forEach(function(item, formIndex) {
					if (item.content !== '') {
						item.image_list.forEach(function(filePath, fileKey) {
							uni.uploadFile({
								url: _this.api_root + 'upload/image',
								filePath: filePath,
								name: 'iFile',
								formData: params,
								success: function(res) {
									let result = typeof res.data === "object" ? res.data : JSON.parse(res.data);
									if (result.code === 1) {
										item.uploaded[fileKey] = result.data.file_id;
									}
								},
								complete: function() {
									i++;
									if (imagesLength === i) {
										// 所有文件上传完成
										console.log('upload complete');
										// 执行回调函数
										callBack && callBack(formData);
									}
								}
							});
						});
					}
				});

			},

		}
	}
</script>

<style>
	.goods-list {
		border-top: 1upx solid #e3e3e3;
		font-size: 28upx;
	}

	.goods-item {
		margin-bottom: 30upx;
		border-bottom: 1upx solid #e3e3e3;
		background: #fff;
	}

	.goods-item .goods-detail {
		padding: 24upx 20upx;
	}

	.goods-item .goods-detail .left .goods-image {
		display: block;
		width: 150upx;
		height: 150upx;
	}

	.goods-item .goods-detail .right {
		padding-left: 20upx;
	}

	.goods-item .score-row {
		padding: 24upx 20upx;
	}

	.goods-item .score-row .score-item.score__praise {
		color: #ff4544;
	}

	.goods-item .score-row .score-item.score__praise .score__icon {
		background: #ff4544;
	}

	.goods-item .score-row .score-item.score__review {
		color: #fcb500;
	}

	.goods-item .score-row .score-item.score__review .score__icon {
		background: #fcb500;
	}

	.goods-item .score-row .score-item.score__negative {
		color: #9b9b9b;
	}

	.goods-item .score-row .score-item.score__negative .score__icon {
		background: #9b9b9b;
	}

	.goods-item .score-row .score-item .score {
		padding: 10upx 20upx 10upx 10upx;
		border-radius: 30upx;
	}

	.goods-item .score-row .score-item .score .score__icon {
		margin-right: 10upx;
		padding: 10upx;
		border-radius: 50%;
		font-size: 30upx;
		color: #fff;
	}

	.goods-item .score-row .score-item.__active .score {
		color: #fff;
	}

	.goods-item .score-row .score-item.__active.score__praise .score {
		background: #ff4544;
	}

	.goods-item .score-row .score-item.__active.score__review .score {
		background: #fcb500;
	}

	.goods-item .score-row .score-item.__active.score__negative .score {
		background: #9b9b9b;
	}

	.goods-item .content-row {
		padding: 10upx 20upx;
	}

	.goods-item .content-row textarea {
		width: 100%;
		height: 220upx;
		padding: 12upx;
		border: 1upx solid #e8e8e8;
		border-radius: 5upx;
		box-sizing: border-box;
	}

	.goods-item .image-list {
		padding: 24upx 20upx;
	}

	.goods-item .image-list:after {
		clear: both;
		content: " ";
		display: table;
	}

	.goods-item .image-list image {
		display: block;
		width: 150upx;
		height: 150upx;
	}

	.goods-item .image-list .image-picker {
		width: 150upx;
		height: 150upx;
		border: 1upx dashed #ccc;
		color: #ccc;
	}

	.goods-item .image-list .image-picker .choose__icon {
		font-size: 56upx;
		margin-bottom: 6upx;
	}

	.goods-item .image-list .image-picker .choose__text {
		font-size: 22upx;
	}

	.goods-item .image-list .image-picker,
	.goods-item .image-list .image-preview {
		margin-right: 30upx;
		margin-top: 30upx;
		float: left;
	}

	.goods-item .image-list .image-picker:nth-child(4n+0),
	.goods-item .image-list .image-preview:nth-child(4n+0) {
		margin-right: 0;
	}

	.goods-item .image-list .image-preview {
		position: relative;
	}

	.goods-item .image-list .image-preview .image-delete {
		position: absolute;
		top: -15upx;
		right: -15upx;
		height: 42upx;
		width: 42upx;
		line-height: 42upx;
		background: rgba(0, 0, 0, 0.64);
		border-radius: 50%;
		color: #fff;
		font-weight: bolder;
		font-size: 22upx;
		z-index: 10;
		text-align: center;
	}

	/*# sourceMappingURL=comment.wxss.map */
</style>
